import 'package:flutter/material.dart';

class BlendManagerState extends StatefulWidget {
  const BlendManagerState({super.key});

  @override
  _BlendManagerState createState() => _BlendManagerState();
}

class _BlendManagerState extends State<BlendManagerState> {
  bool _active = false;

  void _handlerOnTap(bool newValue) {
    print(newValue);
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("混合管理状态")),
      body: Container(
        child: TabBox(active: _active, onChanged: _handlerOnTap),
      ),
    );
  }
}

class TabBox extends StatefulWidget {
  final bool active;
  final ValueChanged<bool> onChanged;

  const TabBox({super.key, this.active = false, required this.onChanged});

  // void _handleTap() {
  //   onChanged(!active);
  // }

  @override
  _TabBox createState() => _TabBox();
}

class _TabBox extends State<TabBox> {
  bool _highlight = false;

  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap() {
    widget.onChanged(!widget.active);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: _handleTapDown,
      onTapUp: _handleTapUp,
      onTapCancel: _handleTapCancel,
      onTap: _handleTap,
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: widget.active ? Colors.lightGreen[700] : Colors.grey[600],
          border:
              _highlight
                  ? Border.all(
                    color: Colors.teal[700] ?? Colors.teal,
                    width: 10,
                  )
                  : null,
        ),
        child: Center(
          child: Text(
            widget.active ? "Active" : "Inactive",
            style: TextStyle(fontSize: 32, color: Colors.white),
          ),
        ),
      ),
    );
  }
}
